<template>
  <div class="shopping-cart">
    <h2>我的购物车</h2>

    <!-- 返回按钮 -->
    <van-button class="back-button" @click="goBack">返回</van-button>

    <!-- 编辑按钮 -->
    <van-button class="edit-button" @click="toggleEditMode">
      {{ isEditMode ? '完成' : '编辑' }}
    </van-button>

    <div v-for="(item, index) in items" :key="index" class="cart-item" v-show="item.uid==user.id">
      <van-checkbox
        v-model="item.checked"
        class="checkbox"
        @change="updateCheckedItems"></van-checkbox>

      <div class="item-details">
        <div class="order-id">{{ item.id }}</div>

        <img :src="item.photo" alt="商品图片" class="item-image"/>

        <div class="item-info">{{ item.comname }}</div>

        <div class="item-price">
          ￥{{ item.price }}
        </div>

        <div class="item-quantity">
          <van-button plain @click="decreaseQuantity(index)">-</van-button>
          <span>{{ item.number }}</span>
          <van-button plain @click="increaseQuantity(index)">+</van-button>
        </div>

        <div class="status">{{ item.status == 1 ? "待付款" : "" }}</div>
      </div>
    </div>

    <div class="checkout-box">
      <span>总计：</span>
      <span>¥ {{ calculateTotal }}</span>
      <van-button
        type="info"
      @click="deleteSelectedItems"
      >
        删除
      </van-button>
      <van-button
        type="info"
      @click="checkout()"
      >
        结算
      </van-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {id} from "html-webpack-plugin/lib/chunksorter";

export default {
  data() {
    return {
      user: {},
      active: 'home',
      isEditMode: false,  // 编辑模式状态
      ids: [],            // 用于存储选中商品的ID
      items: [
        {
          id: 1,
          photo: "example.jpg",
          comname: "商品1",
          price: 100,
          number: 1,
          status: 1,
          checked: false
        },
        // 其他商品...
      ],
    };
  },
  computed: {
    calculateTotal() {
      return this.items
        .filter(item => item.checked)
        .reduce((total, item) => {
          return total + item.price * item.number;
        }, 0);
    }
  },
  created() {
    this.show1();
    this.user = JSON.parse(localStorage.getItem('admin'))
  },
  methods: {
    goBack() {
      //跳转到首页
      this.$router.push('/home');
    },
    toggleEditMode() {
      this.isEditMode = !this.isEditMode; // 切换编辑模式
    },
    updateCheckedItems() {
      this.ids = this.items
        .filter(item => item.checked)
        .map(item => item.id); // 更新ids数组
      // 可以在这里加入调试代码看看ids的内容
      console.log(this.ids);
    },
    increaseQuantity(index) {
      this.items[index].number++;
    },
    decreaseQuantity(index) {
      if (this.items[index].number > 1) {
        this.items[index].number--;
      }
    },
    checkout() {
      localStorage.setItem("idure",this.ids)
      this.$router.push('/OrderConfirmation');
       this.$message({
        message: '去结算啦！',
        type: 'success'
      });
    },
    deleteSelectedItems() {
      this.items = this.items.filter(item => !item.checked); // 删除勾选的商品
      axios.post(`/shoppingcart/shoppingcartdelete?id=`+this.ids) // 提交选中商品ID到后端
        .then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        })
        .catch(err => {
          console.error(err);
          alert('删除失败');
        });
    },
    show1() {
      axios.post('/shoppingcart/shoppingcartshow').then(res => {
        this.items = res.data.data.map(item => ({...item, checked: false}));
      });
    },
  }
};
</script>

<style scoped>
.shopping-cart {
  padding: 16px;
  padding-bottom: 100px; /* 留出空间给底部盒子 */
}

.back-button {
  position: absolute;
  top: 16px; /* 距离顶部16px */
  left: 16px; /* 距离左边16px */
}

.edit-button {
  position: absolute;
  top: 16px; /* 距离顶部16px */
  right: 16px; /* 距离右边16px */
}

.cart-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  flex-direction: column;
}

.item-details {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.checkout-box {
  position: fixed; /* 固定在底部 */
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  padding: 16px;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000; /* 确保在最上层 */
}

.total {
  margin-top: 20px; /* 为总计部分添加间距 */
}
</style>
